<template>
	<view class="container">
		<view class="status_bar">
			<view style="margin-left: 4%;" @tap="goBack()">关闭</view>
			<view style="margin-left: -50upx; font-weight: bold;">选择一个聊天</view>
			<view style="margin-right: 4%;">多选</view>
		</view>
		<view class="con-box">
			<view style="margin-bottom: 20upx;">
				<u-search placeholder="请输入您想搜索的内容" v-model="keyword" :showAction="false" searchIconColor="#373737"
					placeholderColor="#bcbcbc"></u-search>
			</view>
			<u-tabs :list="list1" @click="click" lineColor="#fff"
				:activeStyle="{color: '#2c2c2c',fontWeight: 'bold', transform: 'scale(1.05)'}"></u-tabs>
		</view>
		<view class="select-box">
			<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
				<u-radio :customStyle="{marginBottom: '8px',marginTop:'26upx'}" v-for="(item, index) in radiolist1"
					:key="index" :label="item.name" :name="item.name" @change="radioChange">
					<view style="border-radius: 30upx;margin-left: 10upx;" v-if="item.url">
						<u--image :showLoading="true" :src="item.url" width="80upx" height="80upx" @click="click"
							radius="10upx"></u--image>
					</view>
					<view v-else class="name-img">多</view>
					<view style="margin-left: 20upx;position: relative;">{{item.name}}</view>
					<view style="position: absolute;right: 2%;color: #9c9c9c; font-size: 28upx;">{{item.time}}</view>
				</u-radio>
			</u-radio-group>


			<!-- <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px'}" :label="item.name" :name="item.name"
					v-for="(item, index) in checkboxList1" :key="index">
				</u-checkbox>
				<view style="border-radius: 30upx;margin-left: 10upx;" v-if="item.url">
					<u--image :showLoading="true" :src="item.url" width="80upx" height="80upx" @click="click"
						radius="10upx"></u--image>
				</view>
				<view v-else class="name-img">多</view>
				<view style="margin-left: 20upx;position: relative;">{{item.name}}</view>
				<view style="position: absolute;right: 2%;color: #9c9c9c; font-size: 28upx;">{{item.time}}</view>
			</u-checkbox-group> -->
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list1: [{
					name: '最近聊天',
				}, {
					name: '通讯录',
				}, {
					name: '我的群聊'
				}],
				checkboxValue1: [],
				// 基本案列数据
				radiolist1: [{
						name: '哈哈哈',
						url: '../../../static/img/face.png',
						time: '11-12 16:02',
						disabled: false,
					},
					{
						name: '嘻嘻嘻',

						time: '11-12 16:02',
						disabled: false
					},
					{
						name: '橙子',
						url: '../../../static/img/face.png',
						time: '11-12 16:02',
						disabled: false
					}, {
						name: '榴莲',
						time: '11-12 16:02',
						disabled: false
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			click(item) {
				console.log('item', item);
			},
			checkboxChange(n) {
				console.log('change', n);
			},

			oneye() {
				console.log(111)
				this.passwordShow = false
				this.show = false
			},
			oneyeOpen() {
				console.log(222)
				this.passwordShow = true
				this.show = true

			},
			oneye1() {
				this.passwordShow1 = false
				this.show1 = false
			},
			oneyeOpen1() {
				this.passwordShow1 = true
				this.show1 = true
			},
			change(e) {
				console.log('change', e);
			},
			change1(e) {
				console.log('change', e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background-color: #999;
		overflow: hidden;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 160upx;
	}

	.con-box {
		width: 94%;
		margin-left: 3%;
		background-color: #fff;
		margin-top: 20upx;
		border-radius: 20upx;
		// padding: 10upx 30upx;
		color: #2e2e2e;

	}

	.select-box {
		margin: 10upx 1% 0 2%;

		.name-img {
			width: 80upx;
			height: 80upx;
			border-radius: 10upx;
			background: #d54827;
			font-size: 36upx;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			margin-left: 10upx;
		}
	}
</style>